<template>
  <div class="flex">
    <el-button color="#1d8f8b" plain>添加学员</el-button>
    <el-button color="#1d8f8b" plain>调班</el-button>
    <el-button color="#1d8f8b" plain>删除</el-button>
    <el-button color="#1d8f8b" plain @click="download">导出</el-button>
  </div>
  <!-- 学生信息表 -->
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    class="tables"
  >
    <el-table-column type="selection" width="40" />
    <el-table-column property="name" label="姓名" width="100" align="center">
    </el-table-column>
    <el-table-column property="sexy" label="性别" width="60" align="center" />
    <el-table-column
      property="tel"
      label="联系方式1"
      width="140"
      align="center"
    />
    <el-table-column
      property="phone"
      label="联系方式2"
      width="140"
      align="center"
    />
    <el-table-column
      property="classTime"
      label="剩余课时"
      width="80"
      align="center"
    >
      <template #default="scope">
        <span>{{ formatClass(scope.row.classTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" show-overflow-tooltip align="center">
      <template #default="scope">
        <el-button>请假</el-button>
        <el-button>上传</el-button>
        <el-popconfirm
          title="你确定要删除了?"
          @confirm="confirm(scope.row.id)"
          @cancel="cancel"
        >
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 页码 -->
  <div class="table-footer">
    <div class="words">共{{ total }}条数据</div>
    <el-pagination
      small
      background
      layout="prev,pager,next"
      class="mt-4"
      hide-on-single-page
      :total="total"
      @current-change="pageChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import "@/mock/msg";
import axios from "axios";

import ExportJsonExcel from "js-export-excel";

// // // 右边学生信息表
interface User {
  name: string;
  sexy: number;
  tel: number;
  phone: string;
  classTime: string;
}
// 当前第几页
let page = 1;
const total = ref<number>(0);
const tableData = ref<User[]>([]);
const getTableData = () => {
  axios
    .post("/api/msg/list", {
      pageSize: 12,
      currentPage: page,
    })
    .then((res) => {
      // console.log(res);
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};

onMounted(() => {
  getTableData();
});

const formatClass = (classTime:string)=>{
  return classTime + "课时";
}

const pageChange = (page1: number) => {
  page = page1;
  getTableData();
};

const remove = (id: number) => {
  console.log(id);
};

const confirm = (id: number) => {
  console.log("确定删除", id);
  axios
    .post("/api/msg/msgdel", {
      id: id,
    })
    .then((res) => {
      getTableData();
    });
};
const cancel = () => {
  console.log("取消");
};

// 导出
const download = () => {
  axios.post("/api/msg/export").then((res) => {
    const option: any = {};

    option.fileName = "学生信息";

    option.datas = [
      {
        sheetData: res.data.result,
        sheetName: "sheet",
        sheetFilter: ["id", "name", "tel", "phone"],
        sheetHeader: ["序号", "姓名", "联系方式1", "联系方式2"],
        columnWidths: [8, 8, 8, 8],
      },
    ];

    const toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
    console.log(res.data.result);
  });
};
</script>

<style lang="less" scoped>
.tables {
  margin-top: 10px;
}
.table-footer {
  display: flex;
  justify-content: space-between;
  .words {
    line-height: 20px;
    color: #797979;
  }
}
</style>
